<template>
  <div class="c-editor-tool-bar__container">
    <a-flex vertical align="center" justify="center" v-if="!isFreeBrush">
      <a-tooltip title="选择" placement="right">
        <AimOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'select' }"
          @click="selectTool('select')"
        />
      </a-tooltip>
      <a-tooltip title="拖拽画布" placement="right">
        <DragOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'move' }"
          @click="selectTool('move')"
        />
      </a-tooltip>
      <a-tooltip title="铅笔" placement="right">
        <EditOutlined
          class="c-editor-tool-bar__tool-button-icon"
          @click="selectTool('pencil')"
        />
      </a-tooltip>
      <a-tooltip title="马克笔" placement="right">
        <HighlightOutlined
          class="c-editor-tool-bar__tool-button-icon"
          @click="selectTool('markerPen')"
        />
      </a-tooltip>
      <a-tooltip title="文本" placement="right">
        <FontSizeOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'text' }"
          @click="selectTool('text')"
        />
      </a-tooltip>
      <a-tooltip title="箭头" placement="right">
        <RiseOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'arrow' }"
          @click="selectTool('arrow')"
        />
      </a-tooltip>
      <a-tooltip title="直线" placement="right">
        <MinusOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'line' }"
          @click="selectTool('line')"
        />
      </a-tooltip>
      <a-popover v-model:open="shapeVisible" trigger="click" placement="right">
        <template #content>
          <a-tooltip title="椭圆形" :mouseEnterDelay="1">
            <icon
              class="c-editor-tool-bar__shape-icon"
              @click="addShape('ellipse')"
            >
              <template #component>
                <svg
                  t="1703662893394"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="9241"
                  width="25"
                  height="25"
                >
                  <path
                    d="M512 199.6c53.5 0 105.3 8.7 153.9 25.8 46.4 16.4 88 39.7 123.5 69.3 70.5 58.7 109.3 135.9 109.3 217.3s-38.8 158.5-109.3 217.3c-35.5 29.6-77.1 52.9-123.5 69.3-48.6 17.1-100.4 25.8-153.9 25.8s-105.3-8.7-153.9-25.8c-46.4-16.4-88-39.7-123.5-69.3-70.5-58.8-109.4-135.9-109.4-217.3S164 353.5 234.5 294.7c35.5-29.6 77.1-52.9 123.5-69.3 48.7-17.1 100.5-25.8 154-25.8m0-59.5C265.5 140.1 65.7 306.6 65.7 512c0 205.4 199.8 371.9 446.3 371.9S958.3 717.4 958.3 512c0-205.4-199.8-371.9-446.3-371.9z"
                    p-id="9242"
                  ></path>
                </svg>
              </template>
            </icon>
          </a-tooltip>
          <a-tooltip title="圆形" :mouseEnterDelay="1">
            <icon
              class="c-editor-tool-bar__shape-icon"
              @click="addShape('circle')"
            >
              <template #component>
                <svg
                  t="1703666470579"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10354"
                  width="25"
                  height="25"
                >
                  <path
                    d="M511.99 960.22C264.84 960.22 63.77 759.15 63.77 512S264.84 63.78 511.99 63.78 960.23 264.85 960.23 512 759.14 960.22 511.99 960.22z m0-823.81C304.88 136.41 136.4 304.89 136.4 512s168.48 375.59 375.59 375.59c207.13 0 375.61-168.48 375.61-375.59S719.12 136.41 511.99 136.41z"
                    fill="#2c2c2c"
                    p-id="10355"
                  ></path>
                </svg>
              </template>
            </icon>
          </a-tooltip>
          <a-tooltip title="矩形" :mouseEnterDelay="1">
            <icon
              class="c-editor-tool-bar__shape-icon"
              @click="addShape('rect')"
            >
              <template #component>
                <svg
                  t="1703667601820"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12711"
                  width="25"
                  height="25"
                >
                  <path
                    d="M864 896H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zM192 832h640V192H192v640z"
                    p-id="12712"
                  ></path>
                </svg>
              </template>
            </icon>
          </a-tooltip>
          <a-tooltip title="圆角矩形" :mouseEnterDelay="1">
            <icon
              class="c-editor-tool-bar__shape-icon"
              @click="addShape('roundRect')"
            >
              <template #component>
                <svg
                  t="1703916895568"
                  class="icon"
                  viewBox="0 0 1216 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="15559"
                  width="25"
                  height="25"
                >
                  <path
                    d="M999.76 931.792h-783.52a128 128 0 0 1-128-128V220.208a128 128 0 0 1 128-128h783.52a128 128 0 0 1 128 128v583.584a128 128 0 0 1-128 128zM8.288 204.272v615.472c0 106.032 85.952 192 192 192h815.296c106.032 0 192-85.968 192-192V204.256c0-106.032-85.968-192-192-192H200.288c-106.048 0-192 85.968-192 192z"
                    fill="#000000"
                    p-id="15560"
                  ></path>
                </svg>
              </template>
            </icon>
          </a-tooltip>
          <a-tooltip title="三角形" :mouseEnterDelay="1">
            <icon
              class="c-editor-tool-bar__shape-icon"
              @click="addShape('triangle')"
            >
              <template #component>
                <svg
                  t="1703667738219"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="13784"
                  width="25"
                  height="25"
                >
                  <path
                    d="M928.64 896a2.144 2.144 0 0 1-0.64 0H96a32.032 32.032 0 0 1-27.552-48.288l416-704c11.488-19.456 43.552-19.456 55.104 0l413.152 699.2A31.936 31.936 0 0 1 928.64 896zM152.064 832h719.84L512 222.912 152.064 832z"
                    p-id="13785"
                  ></path>
                </svg>
              </template>
            </icon>
          </a-tooltip>
        </template>
        <a-tooltip title="形状" placement="rightTop">
          <BorderOutlined
            class="c-editor-tool-bar__tool-button-icon"
            :class="{ icon__click: selectedOption === 'shape' }"
            @click="selectTool('shape')"
          />
        </a-tooltip>
      </a-popover>
      <a-tooltip title="橡皮擦" placement="right">
        <ClearOutlined
          class="c-editor-tool-bar__tool-button-icon"
          :class="{ icon__click: selectedOption === 'eraser' }"
          @click="selectTool('eraser')"
        />
      </a-tooltip>
    </a-flex>
    <a-flex vertical align="center" justify="center" v-else>
      <a-tooltip title="返回工具栏" placement="right">
        <ArrowLeftOutlined
          class="c-editor-free-brush-bar__back"
          @click="backToolbar"
        />
      </a-tooltip>
      <icon>
        <template #component>
          <svg
            t="1704094257394"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5204"
            width="20"
            height="20"
          >
            <path
              d="M1024 848H0v-192h1024v192z m0-360H0v-96h1024v96zM1024 224H0v-48h1024v47.936z"
              fill="#707070"
              p-id="5205"
            ></path>
          </svg>
        </template>
      </icon>
      <div class="c-editor-free-brush-bar__width">
        <a-slider
          v-if="isPencil"
          v-model:value="pencil.width"
          :min="1"
          :max="30"
          vertical
          :tip-formatter="formatter"
          @change="changeBrushWidth"
        />
        <a-slider
          v-else
          v-model:value="marker.width"
          :min="1"
          :max="30"
          vertical
          :tip-formatter="formatter"
          @change="changeBrushWidth"
        />
      </div>
      <template v-for="item in classicColorOption" :key="item.id">
        <div
          v-if="
            (selectedOption === 'pencil' && item.pencilColor) ||
            item.markerColor
          "
          class="c-editor-free-brush-bar__color"
          :class="{ color__click: brush.colorName === item.id }"
          :style="{
            '--color': item.backgroundColor,
            '--borderColor': item.borderColor,
          }"
          @click="changeBrushColor(item.id)"
        ></div>
      </template>
    </a-flex>
  </div>
</template>

<script lang="ts" setup>
import Icon, {
  EditOutlined,
  HighlightOutlined,
  DragOutlined,
  FontSizeOutlined,
  RiseOutlined,
  BorderOutlined,
  ClearOutlined,
  MinusOutlined,
  ArrowLeftOutlined,
  AimOutlined,
} from '@ant-design/icons-vue';
import { ref, inject, computed, reactive } from 'vue';
import { classicColorOption } from '@/utils/Const.ts';
import { IEditor } from '@/types/global';
// 白板编辑器对象，操作画布
const canvasEditor: unknown | IEditor = inject('canvasEditor');
// 选中的选项
const selectedOption = ref('select');

// 画笔功能 start
// 铅笔属性
const pencil = reactive({
  colorName: 'black',
  color: 'rgba(0, 0, 0, 1)',
  width: 6,
});
// 马克笔属性
const marker = reactive({
  colorName: 'red',
  color: 'rgba(226, 152, 147, 0.6)',
  width: 16,
});
const isFreeBrush = computed(() => {
  return (
    selectedOption.value === 'pencil' || selectedOption.value === 'markerPen'
  );
});
const isPencil = computed(() => {
  return selectedOption.value === 'pencil';
});
const brush = computed(() => {
  const color = selectedOption.value === 'pencil' ? pencil : marker;
  return {
    color: color.color,
    colorName: color.colorName,
    width: color.width,
  };
});
// 粗细提示格式化工具
const formatter = (value: number) => {
  return `粗细：${value}`;
};
// 改变画笔粗细回调
const changeBrushWidth = function (width: number) {
  canvasEditor.draw(selectedOption.value, width, brush.value.color);
};
// 改变铅笔、马克笔颜色
const changeBrushColor = function (color: string) {
  if (!canvasEditor.getDrawMode()) return;
  let selectedColor = classicColorOption.find((item) => {
    return item.id === color;
  });
  if (selectedOption.value === 'pencil') {
    pencil.colorName = color;
    pencil.color = selectedColor?.pencilColor || 'rgb(0, 0, 0)';
    canvasEditor.draw('pencil', brush.value.width, brush.value.color);
  } else {
    marker.colorName = color;
    marker.color = selectedColor?.markerColor || 'rgba(226, 152, 147, 0.6)';
    canvasEditor.draw('markerPen', brush.value.width, brush.value.color);
  }
};
// 绘画模式返回选择模式
const backToolbar = function () {
  canvasEditor.setDrawMode(false);
  selectedOption.value = 'select';
  canvasEditor.setSelectMode(true);
};

// 画笔功能 end

// 选择工具
const selectTool = function (toolName: string) {
  if (selectedOption.value === toolName) {
    cancelSelect(toolName);
  } else {
    selectedOption.value = toolName;
    useTool(toolName);
  }
};
// 取消工具
const cancelSelect = function (toolName: string) {
  switch (toolName) {
    // 选择
    case 'select':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDragMode(true);
      selectedOption.value = 'move';
      break;
    // 拖拽画布
    case 'move':
      canvasEditor.setDragMode(false);
      canvasEditor.setSelectMode(true);
      selectedOption.value = 'select';
      break;
    case 'text':
      canvasEditor.setTextMode(false);
      canvasEditor.setSelectMode(true);
      selectedOption.value = 'select';
      break;
    // 箭头 && 直线
    case 'arrow':
    case 'line':
      canvasEditor.setLineMode(false);
      canvasEditor.setSelectMode(true);
      selectedOption.value = 'select';
      break;
    // 橡皮擦
    case 'eraser':
      canvasEditor.setEraserMode(false);
      canvasEditor.setSelectMode(true);
      selectedOption.value = 'select';
      break;
    // 图形
    case 'shape':
      canvasEditor.setDrawMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.setSelectMode(true);
      selectedOption.value = 'select';
      break;
    default:
      console.log('cancelSelect');
      break;
  }
};
// 调用工具
const useTool = function (toolName: string) {
  switch (toolName) {
    // 选择
    case 'select':
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.setSelectMode(true);
      break;
    // 拖拽画布
    case 'move':
      canvasEditor.setSelectMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setDragMode(true);
      break;
    // 铅笔
    case 'pencil':
      canvasEditor.setSelectMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.draw(selectedOption.value, pencil.width, pencil.color);
      break;
    // 马克笔
    case 'markerPen':
      canvasEditor.setSelectMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.draw(selectedOption.value, marker.width, marker.color);
      break;
    // 文本
    case 'text':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.setTextMode(true);
      break;
    // 箭头
    case 'arrow':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.setLineMode(true);
      canvasEditor.setIsArrow(true);
      break;
    // 直线
    case 'line':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.setLineMode(true);
      canvasEditor.setIsArrow(false);
      break;
    // 橡皮擦
    case 'eraser':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setDragMode(false);
      canvasEditor.erase();
      break;
    // 图形
    case 'shape':
      canvasEditor.setSelectMode(false);
      canvasEditor.setDrawMode(false);
      canvasEditor.setTextMode(false);
      canvasEditor.setLineMode(false);
      canvasEditor.setEraserMode(false);
      canvasEditor.setDragMode(false);
      break;
    default:
      console.log('useTool');
      break;
  }
};

// 图形选择浮层
const shapeVisible = ref(false);

const addShape = (type: string) => {
  switch (type) {
    // 椭圆形
    case 'ellipse':
      canvasEditor.addEllipse();
      break;
    // 圆形
    case 'circle':
      canvasEditor.addCircle();
      break;
    // 三角形
    case 'triangle':
      canvasEditor.addTriangle();
      break;
    // 矩形
    case 'rect':
      canvasEditor.addRect();
      break;
    // 圆角矩形
    case 'roundRect':
      canvasEditor.addRoundRect();
      break;
  }
  selectedOption.value = 'select';
  shapeVisible.value = false;
  canvasEditor.setSelectMode(true);
};
</script>

<style scoped lang="scss">
.c-editor-tool-bar__container {
  position: fixed;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  min-width: 60px;
  max-width: 80px;
  padding: 5px;
  .c-editor-tool-bar__tool-button-icon {
    cursor: pointer;
    font-size: 1.8rem;
    border-radius: 50%;
    padding: 10px;
    margin: 8px 0;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .icon__click {
    color: #108ee9;
    background: rgba(16, 142, 233, 0.1);
  }
  .c-editor-free-brush-bar__back {
    cursor: pointer;
    font-size: 1.2rem;
    padding: 8px;
    margin: 8px 10px 18px 0;
    &:hover {
      background: rgba(185, 185, 185, 0.2);
    }
  }
  .c-editor-free-brush-bar__width {
    height: 10rem;
    margin: 6px 0 30px 0;
  }
  .c-editor-free-brush-bar__color {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    padding: 2px;
    margin: 3px 0 12px 0;
    background-clip: border-box;
    background-color: var(--color);
    border: 3px solid var(--borderColor);
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 3px 3px rgba(185, 185, 185, 0.5);
    }
  }
  .color__click {
    background-clip: content-box;
  }
}
.c-editor-tool-bar__shape-icon {
  cursor: pointer;
  border-radius: 8%;
  padding: 5px;
  &:hover {
    background: rgba(185, 185, 185, 0.2);
    color: #108ee9;
  }
}
</style>
